import { Route } from '@/router'
import { useUserStore } from '@/stores/auth'
import { useCourseSessionStore } from '@/stores/useCourseStore'
import { message } from 'ant-design-vue'
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'
import CountDown from 'vue3-countdown'

export default defineComponent({
  setup(props, { emit }) {
    const course = useCourseSessionStore()
    const router = useRouter()

    const userInfo = useUserStore()
    const userId = userInfo.user?.id

    const go2home = () => {
      message.error('Time is up!', 2.5, () => {
        router.replace({ name: Route.COMPETITION })
      })
    }

    const time = ref(0)

    return () => (
      <div
        class="fixed flex flex-col items-center justify-center h-20 space-y-2 text-white bg-white cursor-pointer pointer-events-none z-999 w-50 right-30"
        style="background:rgba(	220, 220, 220, .3)"
      >
        <p>{course?.course?.title}</p>
        <CountDown
          time={time.value}
          format="HH:mm"
          class="text-24px"
          onFinish={() => {
            go2home()
          }}
        />
      </div>
    )
  }
})
